<template>
	<section class="vbox">
		<section class="scrollable padder">
			<div class="m-b-md">
				<h3 class="m-b-none">音频
				</h3>

			</div>
			<section class="panel panel-default">
				<header class="panel-heading font-bold">
					请填写以下信息：
				</header>
				<div class="panel-body">
					<form class="form-horizontal" v-on:submit.prevent="onSubmit">
						<div class="form-group">
							<label class="col-sm-2 control-label">标题</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.title" class="form-control parsley-validated" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">作者</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.author" class="form-control parsley-validated" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label" for="input-id-1">链接</label>
							<div class="col-sm-10">
								<input type="url" class="form-control parsley-validated" required="true" placeholder="输入媒体文件网址" v-model="model.url">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label" for="input-id-1">音频来源</label>
							<div class="col-sm-10">
								<select class="form-control" v-model="model.mediaSource">
									<option v-for="item in mediaSources" v-bind:value="item.code" :key="item.code">
										{{ item.name }}
									</option>
									<option value="9999">其他</option>
								</select>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">分类</label>
							<div class="col-sm-10">
								<select class="form-control" v-model="model.category">
									<option v-for="item in mediaCategorys" v-bind:value="item.code" :key="item.code">
										{{ item.name }}
									</option>
									<option value="9999">其他</option>
								</select>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">播放时长</label>
							<div class="col-sm-10">
								<input type="text" v-model.trim="model.duration" class="form-control parsley-validated" required="true">
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">更新时间</label>
							<div class="col-sm-10">
								<p class="form-control-static">{{ model.updateTime }}</p>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">发布</label>
							<div class="col-sm-10">
								<el-switch v-model="model.publish" active-color="#1AB667">
								</el-switch>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">海报</label>
							<div class="col-sm-10">
								<img v-if="model.poster" height="450" :src="$api.file.url.view + model.poster" alt="" class="r r-2x m-b-sm">
								<div>
									<a href="#image-upload" data-toggle="modal" class="btn btn-success">选择图片</a>
									<image-upload v-on:getPoster="getPoster"></image-upload>
								</div>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<label class="col-sm-2 control-label">简介</label>
							<div class="col-sm-10">
								<ckeditor :editor="editor" v-model="model.intr" :config="editorConfig"></ckeditor>
							</div>
						</div>
						<div class="line line-dashed b-b line-lg pull-in"></div>
						<div class="form-group">
							<div class="col-sm-10 col-sm-offset-2">
								<button type="submit" class="btn btn-success m-r-md">提交</button>
								<router-link class="btn btn-success" :to="'/video/'+ model.id" v-show="null != model.id">预览</router-link>
							</div>
						</div>
					</form>
				</div>
			</section>
		</section>
		<btn-goback></btn-goback>
	</section>
</template>

<script>
	import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
	import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
	import {
		getTime
	} from '@/utils'

	export default {
		name: "audioForm",
		components: {

		},
		props: {
			id: {
				type: String,
				default: null
			},
		},
		data() {
			return {
				mediaCategorys: [],
				mediaSources: [],
				editor: ClassicEditor,
				editorConfig: {
					language: 'zh-cn'
				},
				model: {
					id: null,
					title: '',
					author: '',
					source: '1',
					updateTime: getTime(),
					publish: 1,
					intr: '',
					duration: '',
					poster: ''
				}
			}
		},
		mounted() {

			//初始化站点select
			this.$api.sysDict.queryDictItems("video_category").then(data => {
				this.mediaCategorys = data;
			});

			this.$api.sysDict.queryDictItems("media_source").then(data => {
				this.mediaSources = data;
			});

			//业务逻辑
			const params = this.$route.params;
			console.debug('params:', params);
			if (params.id != null && params.id != 0) {
				this.$api.audio.queryById(params.id).then(data => {
					this.model = data;
				});
			}
		},
		methods: {
			onSubmit() {
				console.debug('model', this.model);
				console.debug('model.intr', this.model.intr);
				// this.model = {}
				if (this.model.id == null) {
					this.$api.audio.add(this.model).then(data => {
						this.model.id = data.id;
						console.debug('model.id', data.id);
					});
				} else {
					this.$api.audio.update(this.model);
				}
			},
			getPoster(code) {
				this.model.poster = code;
			}
		}

	}
</script>
